<script setup lang="ts">
import type { GenericEnvStore } from "@/modules/dev-env/store/generic-env-store.ts";
import { shallowRef, watch } from "vue";
import type { EnvVariableConfig } from "@/modules/dev-env/store/types.ts";
import GenericEnvVariable from "./generic-env-variable.vue";
import { openSystemPropertiesAdvanced } from "@/util/system-utils.ts";
import { hc } from "@/framework/vue/util/render.ts";
import { SettingOutlined } from "@ant-design/icons-vue";

const { store } = defineProps<{
  store: GenericEnvStore<any>;
}>();

const envVariables = shallowRef<EnvVariableConfig[]>([]);

watch(
  () => store,
  () => {
    envVariables.value = store.getEnvVariables();
  },
  { immediate: true },
);
</script>

<template>
  <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }" class="pv-20">
    <a-divider orientation="left" style="margin-top: 0">
      <span class="color-text-secondary font-14">环境变量</span>
    </a-divider>
    <template v-for="it in envVariables" :key="it.name">
      <generic-env-variable :config="it" />
    </template>
    <a-form-item :wrapper-col="{ offset: 5 }">
      <a-button @click="openSystemPropertiesAdvanced" :icon="hc(SettingOutlined)">系统属性环境变量</a-button>
    </a-form-item>

    <component v-if="store.settingExtraComponent" :is="store.settingExtraComponent" :store="store" />
  </a-form>
</template>
